<template>
  <div class="tui-menu-item-group">
    <!-- 分组标题 -->
    <div class="tui-menu-item-group__title" v-if="title || $slots.title">
      <slot name="title">{{ title }}</slot>
    </div>
    <!-- 分组内容 -->
    <div class="tui-menu-item-group__list">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TuiMenuItemGroupProps } from './types';

// 定义props
const props = withDefaults(defineProps<TuiMenuItemGroupProps>(), {
  title: ''
});
</script>

<style lang="scss" scoped>
// 菜单项分组基础样式
.tui-menu-item-group {
  position: relative;
}

// 分组标题样式
.tui-menu-item-group__title {
  display: block;
  font-size: 12px;
  color: #909399;
  padding: 30px 20px 10px;
  line-height: 1.0;
  user-select: none;
}

// 折叠状态下的样式调整
.tui-menu--collapse .tui-menu-item-group__title {
  padding: 30px 10px 10px;
  text-align: center;
}
</style>